<template>
	<view class="main">
		<view class="apply-info">
			<view class="apply-info-item">
				<view class="apply-label">
					请选择申请对象
				</view>
				<view class="apply-input">
					<u-input v-model="selectName" type="select" placeholder="请选择申请对象" @click="openSelect" />
				</view>
			</view>
			<view class="apply-info-item" v-if="selectVal==1">
				<view class="apply-label">
					服务中心账号
				</view>
				<view class="apply-input">
					<input class="uni-input mbInput" type="text" v-model="serviceName" placeholder="服务中心账号" @confirm="getAccountInfo" confirm-type="search" />
					
				</view>
			</view>
			<view class="tip" v-if="selectVal==1">请输入服务中心账号获取汇款账户信息</view>
			<view class="apply-info-item">
				<view class="apply-label">
					申请金额
				</view>
				<view class="apply-input">
					<u-input v-model="amount" type="text" placeholder="申请金额" />
				</view>
			</view>
			<view class="apply-info-item" v-if="isEdit==1">
				<view class="apply-label">
					状态
				</view>
				<view class="apply-input red">
					{{statusText}}
				</view>
			</view>
			<view class="apply-info-item" v-if="isReject">
				<view class="apply-label">
					拒绝原因
				</view>
				<view class="apply-input">
					<view class="Refuse">
						{{rejectContent}}
					</view>
				</view>
			</view>
		</view>
		<view class="boxInfo">
			<view class="title">上传凭证</view>
			<view class="box-list">

				<view class="li-upload">
					<view class="name">付款凭证：</view>
					<view class="cont">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true" @on-success="upLoadSuccess"
							@on-uploaded="uploaded"></u-upload>
					</view>
				</view>
			</view>
		</view>
		<view class="boxInfo-two" v-if="isAccount">
			<view class="title">
				<view class="title-left">汇款信息</view>
				<view class="copy-btn redColor" @tap="copyAll()">复制</view>
			</view>
			<view class="box-list">

				<view class="li">
					<view class="name">开户支行：</view>
					<view class="cont">{{bankInfo.bankName}}</view>
					<view class="copy-btn" @tap="copyItem(1,bankInfo.bankName)">复制</view>
				</view>
				<view class="li">
					<view class="name">开户名：</view>
					<view class="cont">{{bankInfo.accountName}}</view>
					<view class="copy-btn" @tap="copyItem(2,bankInfo.accountName)">复制</view>
				</view>
				<view class="li">
					<view class="name">开户账号：</view>
					<view class="cont">{{bankInfo.accountNo}}</view>
					<view class="copy-btn" @tap="copyItem(3,bankInfo.accountNo)">复制</view>
				</view>
				<!-- <view class="li">
					<view class="name">微信号：</view>
					<view class="cont">{{bankInfo.accountWx}}</view>
					<view class="copy-btn" @tap="copyItem(4,bankInfo.accountWx)">复制</view>
				</view> -->
				<view class="li">
					<view class="name">支付宝账号：</view>
					<view class="cont">{{bankInfo.accountZfb}}</view>
					<view class="copy-btn" @tap="copyItem(5,bankInfo.accountZfb)">复制</view>
				</view>
			</view>
		</view>

		<view class="box-three">
			<view class="title">注意事项：</view>
			<view class="cont">
				<view class="tip">汇款时请注意一下信息，请牢记！</view>
				<view class="tip-li">1.线下公司转账订单，一个识别码对应一个订单和相应的金 额，请勿多转账或者少转账。 </view>
				<view class="tip-li">2.请在7天内付清款项，超过10天未对账系统自动会取消订 单，到账周期为3个工作日起。</view>
			</view>
		</view>
		<u-select v-model="showSelect" mode="single-column" :list="selectList" @confirm="confirm" @cancel="cancelSelect"></u-select>
		<view class="bottom">
			<view class="bottom-right" @tap="surePay" v-if="status==0||isEdit==0">提交申请</view>
		</view>

	</view>
</template>

<script>
	import {
		httpUrl,
		imgUrl
	} from "@/common/config.js"
	export default {
		data() {
			return {
				fileList: [],
				imgUrl: imgUrl,
				action: httpUrl + 'upload/voucher',
				money: 0,
				serialNumber: "",
				orderNumber: "",
				picList: [],
				picStr: "",
				payOrderNumber: "",
				show: false,

				bankInfo: {
					accountName: "",
					accountNo: "",
					accountWx: "",
					accountZfb: "",
					bankName: ""
				},
				user_info: {
					activateFee: 0,
					activatedIntegral: 0,
					buyPoints: 0,
					level: 1,
					levelName: "普通会员",
					mhbPoints: 0,
					mhbPrice: 0,
					partnerFee: 0,
					proPoints: 0,
					rewardIntegral: 0,
					userId: "",
					userPhoto: "",
					userType:null
				},
				amount: 0,
				imgTransfer: "",
				serviceName: "",
				voucherList: [],
				status: null,
				isEdit: 0,
				serviceId: 0,
				isReject: false, //是否存在拒绝原因
				rejectContent: "",
				statusText: "",
				id:"",
				selectList:[],
				showSelect:false,
				selectName:"",
				selectVal:null,
				isAccount:false
			};
		},
		onUnload() {

		},
		computed: {

		},
		onLoad(options) {
			console.log('111', options);
			this.isEdit = options.isEdit;
			if (this.isEdit == 1) { //编辑
				this.amount = options.amount;
				this.status = options.status;
				this.imgTransfer = options.imgTransfer;
				this.serviceId = options.serviceId;
				if(this.serviceId==0){
					this.selectName="平台";
				}else{
					this.selectName="服务中心账号";
					this.serviceName = options.serviceName;
				}
				
				this.id=options.id;
				this.voucherList = this.imgTransfer.split(",");
				this.fileList = this.voucherList.map((item) => {
					let newUrl = this.imgUrl + item;
					return {
						url: newUrl
					};
				});
				// this.picList=this.voucherList.map((item)=>{
					
				// });
				console.log('编辑',this.voucherList)
				if (options.rejectContent) {
					this.isReject = true;
					this.rejectContent = options.rejectContent;
				}
				if(this.status==0){
					this.statusText="待审核"
				}
				if(this.status==1){
					this.statusText="已通过"
				}
				if(this.status==2){
					this.statusText="已拒绝"
				}
				if(this.status==3){
					this.statusText="已发放"
				}
			}
			this.user_info = uni.getStorageSync('userInfo');
			if(this.user_info.userType==2){
				this.selectList=[{value:0,label:"平台"},{value:1,label:"服务中心账号"}];
			}else{
				this.selectList=[{value:1,label:"服务中心账号"}];
			}
			console.log(this.user_info);
			
		},
		methods: {
			getBankInfo() {
				let that = this;
				this.$u.post('serviceaccounts/getAccountInfo/'+this.serviceName).then(res => {
					console.log(res)
					that.bankInfo = res;
                    that.isAccount=true;
				})
			},
			copyAll() {

				let data = this.bankInfo.accountName + ';' + this.bankInfo.accountNo + ';' + this.bankInfo.accountWx +
					';' + this.bankInfo.accountZfb + ';' + this.bankInfo.bankName;
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
					}
				});
			},
			copyItem(val, data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						console.log('success');
					}
				});
			},
			backPage() {
				uni.navigateBack();
			},
			surePay() {
				let that = this;
				if (this.amount == 0 || this.amount == "") {
					uni.showToast({
						title: '申请金额必须大于0',
						icon: 'none'
					})
					return
				}
                
				 let photoList = [];
				 photoList=[...this.picList,...this.voucherList];
				  console.log('图片2',photoList)
				if (photoList.length == 0) {
					uni.showToast({
						title: '请上传凭证',
						icon: 'none'
					})
					return
				}
				
				// for (let i = 0; i < this.picList.length; i++) {
				// 	if(this.picList[i].response){
				// 		photoList.push(this.picList[i].response.data[0].path + '/' + this.picList[i].response.data[0].name);
				// 	}
					
				// }
				//console.log(photoList);
				this.$u.post('mallmoneyapply/apply', {
					amount: this.amount,
					serviceName: this.serviceName,
					imgTransfer: photoList.join(','),
					userId: this.user_info.id,
					userName: this.user_info.userName,
					id:this.id
				}).then(res => {

					uni.showToast({
						title: '提交成功！'
					})
					setTimeout(() => {
						this.$u.route({
							type: 'back',
							delta: 1
						})
					}, 1500)

				})
			},
			upLoadSuccess(data, index, lists, name) {
                        
			},
			uploaded(lists, name) {
				console.log(lists)
				for(let i=0;i<lists.length;i++){
					if(lists[i].response){
						this.picList.push(lists[i].response.data[0].path + '/' + lists[i].response.data[0].name);
					}
				}
			},
			confirm(e){
				console.log(e)
				this.selectName=e[0].label;
				this.selectVal=e[0].value;
				if(this.selectVal==0){//平台
					this.getlatformAccount()
				}
				if(this.selectVal==1){
					 this.bankInfo="";
					  this.isAccount=false;
				}
			},
			getlatformAccount(){
				let that = this;
				this.$u.post('mallmoneyapply/getAccountInfo').then(res => {
					console.log(res)
					that.bankInfo = res;
				    that.isAccount=true;
				})
			},
			openSelect(){
				this.showSelect=true;
			},
			cancelSelect(){
				this.showSelect=false;
			},
			getAccountInfo(){
				this.getBankInfo();
			}


		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #F6F6F6;
		padding-top: 30rpx;
	}

	.boxInfo {
		width: 690rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}

		.li {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;

			.name {
				color: #b7b7b7;
			}

			.cont {
				color: #1f1f1f;
			}
		}

		.li-upload {
			font-size: 24rpx;

			.name {
				color: #b7b7b7;
			}

			.cont {
				color: #1f1f1f;
			}
		}
	}

	.boxInfo-two {
		width: 690rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 30rpx;

		.title {

			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.title-left {
				font-size: 32rpx;
				font-weight: 600;

			}

			.copy-btn {
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
			}

			.redColor {
				color: #ff4975;
				border: 2rpx solid #ff4975;
			}
		}

		.li {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 24rpx;
			margin-bottom: 10rpx;

			.copy-btn {
				font-size: 24rpx;
				border: 2rpx solid #b4b4b4;
				border-radius: 30rpx;
				padding: 6rpx 16rpx;
				margin-left: 10rpx;
			}

			.name {
				color: #b7b7b7;
				line-height: 48rpx;
				width: 144rpx;
			}

			.cont {
				color: #1f1f1f;
				line-height: 48rpx;
			}
		}
	}

	.box-three {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #ff1c60;
			border-bottom: 2rpx solid #f8f8f8;
			margin-bottom: 10rpx;
			padding-bottom: 10rpx;
		}

		.cont {
			.tip {
				margin-top: 10rpx;

			}

			.tip-li {
				color: #c6c6c6;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.bottom {

		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #fff;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
         z-index: 2000;

		.bottom-right {
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			background: linear-gradient(to right, #fea457, #FE381B);
			border-radius: 86rpx;
		}
	}

	.apply-info {
		margin-left: 30rpx;
		margin-right: 30rpx;

		.apply-info-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;

			.apply-label {
				line-height: 70rpx;
			}
		}
		.tip{
			color: #FE381B;
			margin-bottom: 20rpx;
			font-size: 24rpx;
		}
	}
	.red{
		color: #FE381B;
		line-height: 70rpx;
		text-align: left;
	}
	.mbInput{
		height: 70rpx;
		line-height: 70rpx;
	}
</style>